<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM课堂案例</title>
</head>
<body>
    <img id="h1" src="../img/off.gif"> <br><br>
    <div>
        <div class="cls">杰普软件</div> <br>
        <div class="cls">Java程序员</div> <br>
    </div>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <input type="button" value="全选" id="all">
    <input type="button" value="全不选" id="no">
    <input type="button" value="反选" id="re">

    <script>
        // 点亮灯泡
        // 获取img标签的元素，修改里面的src属性
        var oImg = document.getElementById('h1');
        console.log(oImg.src)
        // 绑定一个点击事件
        oImg.onclick = function(){
            // 判断src里的值是of还是on，如果是of就设置为on
            if(oImg.src.indexOf('off') != -1){
                oImg.src = '../img/on.gif';
            }else{
                oImg.src = '../img/off.gif';
            }
        }
        // 给div后面的字追加内容，并修改样式
        // 获取所有div
        var oDivs = document.getElementsByClassName("cls");
        var oDivAll = document.getElementsByTagName("div");
        console.log(oDivAll);
        // 定义一个函数
        var veryGood = function(){
            // 遍历
            for(var oDiv of oDivs){
                // 先获取原来的值
                var sValue = oDiv.innerHTML;
                // 追加内容
                var appendString = '<font style="color:red">very good</font>';
                // 拼接
                oDiv.innerHTML = sValue.concat(appendString);    
            }
        }
        // oDivAll[0].onmouseover = veryGood
        oDivAll[0].style.width = 200+"px";

        // 获得按钮
        var oBtn = document.getElementById("all");
        // 一键全选
        oBtn.onclick = function all(){
            alert(1);
            // 获取所有的复选框，遍历，修改其中的checked状态
            var oInputs = document.getElementsByName("hobby");
            oInputs.forEach(function(value){
                value.checked = true;
            });
        }
        // 一键全不选

        // 反选
    </script>
    
</body>
</html>